CSSの基本(4)−フォントを指定する
今回の講座では、CSSを使って文字のフォントを指定する方法を紹介します。ホームページに表示する文字にフォントを指定する場合は、そのフォントを所有していない人のことも考え、種類でフォントを指定するのが基本です。 サンプルページ

→ CSSでフォントを指定する
 
CSSでフォントを指定する場合は、font-familyプロパティを利用し、その値にフォント名を記述します。このとき、「MS 明朝」のように名前に半角スペースが含まれるフォントは、そのフォント名を「'」(シングルクォーテーション)で囲まなければいけません。また、この方法によるフォント指定が有効となるのは、指定したフォントがインストールされているパソコンに限ります。パソコンにフォントがインストールされていなかった場合は、規定のフォントのまま表示されることに注意してください。
<SPAN style="font-family:'MS 明朝'">さまざまなフォント</SPAN><BR>
<SPAN style="font-family:HG丸ゴシックM-PRO">さまざまなフォント</SPAN><BR>
<SPAN style="font-family:HG創英角ポップ体">さまざまなフォント</SPAN><BR>
<SPAN style="font-family:HG行書体">さまざまなフォント</SPAN><BR>
サンプルページ


→ CSSでフォントの種類を指定する
 
先ほども述べたように、フォントの指定はホームページを閲覧するパソコン環境に大きく依存します。たとえWindowsに標準装備されているフォントであっても、Mac OSやLinuxなどを利用している人は正しいフォントで表示されない可能性が大です。そこでフォントを指定する場合は、フォント名ではなくフォントの種類を指定するようにします。CSSでは、以下のような5種類のフォントを指定することが可能です。通常は、この方法でフォントを指定するように心がけてください。

serif……………明朝系のフォント
sans-serif……ゴシック系のフォント
cursive………草書体、筆記体のフォント
fantasy………装飾のあるフォント
monospace……等幅フォント

<SPAN style="font-family:serif">さまざまなフォント(serif)</SPAN><BR>
<SPAN style="font-family:sans-serif">さまざまなフォント(sans-serif)</SPAN><BR>
<SPAN style="font-family:cursive">さまざまなフォント(cursive)</SPAN><BR>
<SPAN style="font-family:fantasy">さまざまなフォント(fantasy)</SPAN><BR>
<SPAN style="font-family:monospace">さまざまなフォント(monospace)</SPAN><BR>
サンプルページ


→ フォント名と種類を同時に指定する
 
フォント名を指定するとき、「font-family:HG行書体,cursive」のように複数の値を列記することも可能です。この場合、「HG行書体」がインストールされているパソコンは「HG行書体」で文字が表示されます。「HG行書体」がインストールされていないパソコンは、他の草書体や筆記体に置き換えられて文字が表示されます。このため、単に「font-family:cursive」と記述するよりも「HG行書体」で表示される可能性が高くなります。フォントの指定に慣れてきたら試してみてください。


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze